<template>
	<!-- v-if 判断接口数据没有不渲染页面  防止报错 -->
	<view v-if="data">
		<!-- 通告栏 -->
		<uni-notice-bar
			style="margin: 0;"
			single
			text="学子商城APP即将上线,正在开发中~~~by WEB2108"
			scrollable
			showIcon
			showClose
			:speed="30"
		></uni-notice-bar>
		<!-- 轮播图 -->
		<swiper
			circular
			indicator-dots
			autoplay
			:interval="3000"
			:duration="1000"
		>
			<swiper-item
				v-for="(item, index) in data.carouselItems"
				:key="index"
			>
				<image
					:src="`http://www.codeboy.com:9999/${item.img}`"
					style="width: 100%;height: 100%;"
				></image>
			</swiper-item>
		</swiper>
		<view v-for="(item, index) in items" :key="index">
			<!-- 楼层信息 -->
			<view class="header">
				<uni-icons
					:type="item.icon"
					size="20"
					:color="item.color"
				></uni-icons>
				<text>{{ item.title }}</text>
			</view>
			<!-- 商品列表 使用grid布局 -->
			<!-- 代码冗余  重复 -->
			<uni-grid
				:column="2"
				:showBorder="false"
				:highlight="false"
				:square="false"
			>
				<uni-grid-item v-for="(item1, index) in item.data" :key="index">
					<!-- 每一个商品元素 -->
					<view class="cell">
						<!-- 图片 -->
						<image
							:src="`http://www.codeboy.com:9999/${item1.pic}`"
						></image>
						<!-- 商品名称 -->
						<view>{{ item1.title }}</view>
						<!-- 商品描述 -->
						<view>{{ item1.details }}</view>
						<!-- 价格 -->
						<view>¥{{ item1.price }}</view>
						<!-- 查看详情按钮  type default 默认在uni-app里是蓝色，但是在微信小程序里是绿色-->
						<button
							size="mini"
							style="background-color: #007AFF;color:white"
						>
							查看详情
						</button>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
		<!-- 底部小图标 -->
		<uni-grid :column="4" :highlight="false" :showBorder="false">
			<!-- 4  1 2 3 4 -->
			<!-- 编译成小程序时  wx-for in 4  下标从0开始 -->
			<!-- item是1开始  index 是0开始 -->
			<uni-grid-item v-for="(item, index) in [1, 2, 3, 4]" :key="index">
				<view style="display: flex;justify-content: center;">
					<view>
						<image
							:src="`/static/icons/icon${item}.png`"
							style="width: 100rpx;height: 100rpx;"
						></image>
						<view>{{ bottomText[index] }}</view>
					</view>
				</view>
			</uni-grid-item>
		</uni-grid>
		<!-- 回到顶部按钮 -->
		<view class="btn-gotop" v-show="showBtn" @click="goTop">
			<uni-icons type="arrowthinup" color="white" size="20"></uni-icons>
		</view>
	</view>
</template>

<script>
export default {
	// 发请求  拿数据  存本地  做展示
	data() {
		return {
			data: null,
			showBtn:false
		};
	},
	mounted() {
		this.getData();
	},
	// 监控滚动
	onPageScroll(e){
		this.showBtn = e.scrollTop>1500;
	},
	methods: {
		goTop(){
			uni.pageScrollTo({
				scrollTop:0,
				duration:250
			})
		},
		getData() {
			const url = 'http://www.codeboy.com:9999/data/product/index.php';
			uni.request({
				url,
				method: 'GET',
				data: {},
				success: res => {
					// console.log(res);
					this.data = res.data;
					console.log(this.data);
				},
				fail: () => {},
				complete: () => {}
			});
		}
	},
	computed: {
		// 每个楼层结构是相同  不同的是数据项，遍历传入对应数据项即可
		items() {
			return [
				{
					title: '1F/首页推荐',
					icon: 'shop',
					color: 'gray',
					data: this.data.recommendedItems
				},
				{
					title: '2F/最新上架',
					icon: 'weixin',
					color: 'green',
					data: this.data.newArrivalItems
				},
				{
					title: '3F/热销单品',
					icon: 'weibo',
					color: 'red',
					data: this.data.topSaleItems
				}
			];
		},
		// 底部图标文字信息
		bottomText(){
			return ['品质保障','私人订制','学员特供','专属特权']
		}
	}
};
</script>

<style scoped lang="scss">
.header {
	padding: 15rpx;
	background-color: #eeeeee;
	> text {
		margin-left: 15rpx;
		font-weight: 400;
		font-size: 1.1em;
	}
}
.cell {
	padding: 5rpx;
	margin-left: 5rpx;
	border: 1px solid #c0c4cc;
	border-radius: 10rpx;
	> image {
		width: 100%;
		height: 280rpx;
	}
	> view {
		padding-left: 10rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		&:first-of-type {
			font-weight: bold;
		}
		&:nth-of-type(2) {
			color: gray;
			font-size: 0.9em;
		}
		&:last-of-type {
			color: red;
			font-size: 1.1em;
		}
	}
}
</style>
